<?php if(!class_exists("View", false)) exit("no direct access allowed");?><!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>棱镜风控平台 - 登录</title>
    <!-- 引入外部资源 -->
    <link rel="stylesheet" href="https://cdnjs.cloudflare.com/ajax/libs/font-awesome/6.4.0/css/all.min.css">
    <script src="https://cdn.tailwindcss.com"></script>
    <script src="https://code.jquery.com/jquery-3.7.1.min.js"></script>
    
    <!-- Tailwind 配置 -->
    <script>
        tailwind.config = {
            theme: {
                extend: {
                    colors: {
                        primary: '#165DFF',
                        secondary: '#4080FF',
                        success: '#00B42A',
                        warning: '#FF7D00',
                        danger: '#F53F3F',
                        pending: '#86909C',
                        dark: '#1D2129',
                        'neutral-100': '#F7F8FA',
                        'neutral-200': '#E5E6EB',
                        'neutral-300': '#C9CDD4',
                        'neutral-400': '#86909C',
                        'neutral-500': '#4E5969',
                    },
                    fontFamily: {
                        inter: ['Inter', 'system-ui', 'sans-serif'],
                    },
                }
            }
        }
    </script>
    
    <style type="text/tailwindcss">
        @layer utilities {
            .content-auto {
                content-visibility: auto;
            }
            .bg-gradient-primary {
                background: linear-gradient(135deg, #165DFF 0%, #4080FF 100%);
            }
            .animate-float {
                animation: float 6s ease-in-out infinite;
            }
            .input-focus {
                @apply focus:border-primary focus:ring-2 focus:ring-primary/20 focus:outline-none;
            }
            /* Toast样式 */
            .toast {
                @apply fixed z-50 px-4 py-3 rounded-lg shadow-lg transform transition-all duration-300 flex items-center;
            }
            .toast-top-center {
                @apply top-4 left-1/2 -translate-x-1/2;
            }
            .toast-success {
                @apply bg-success text-white;
            }
            .toast-error {
                @apply bg-danger text-white;
            }
            .toast-warning {
                @apply bg-warning text-white;
            }
            .toast-info {
                @apply bg-primary text-white;
            }
            .toast-icon {
                @apply mr-2;
            }
            .toast-hidden {
                @apply opacity-0 translate-y-[-20px] pointer-events-none;
            }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
        
        @keyframes float {
            0% { transform: translateY(0px); }
            50% { transform: translateY(-20px); }
            100% { transform: translateY(0px); }
        }
    </style>
</head>
<body class="font-inter bg-neutral-100 min-h-screen flex items-center justify-center p-4">
    <div class="w-full max-w-6xl bg-white rounded-2xl shadow-xl overflow-hidden flex flex-col md:flex-row">
        <!-- 左侧品牌区域 -->
        <div class="bg-gradient-primary text-white p-8 md:p-12 flex-1 flex flex-col justify-between">
            <div>
                <div class="flex items-center space-x-3 mb-12">
                    <div class="w-10 h-10 rounded-lg bg-white/20 backdrop-blur-sm flex items-center justify-center">
                        <i class="fa fa-shield text-white text-xl"></i>
                    </div>
                    <h1 class="text-2xl font-bold">棱镜风控平台</h1>
                </div>
                
                <h2 class="text-[clamp(1.5rem,3vw,2.5rem)] font-bold leading-tight mb-4">
                    智能高效的<br>风险风控平台
                </h2>
                <p class="text-white/80 mb-8 max-w-md">
                    提供全方位的风险风控解决方案，保障平台内容安全，提升审核效率与准确性
                </p>
                
                <div class="space-y-4">
                    <div class="flex items-start space-x-3">
                        <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-check text-sm"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">AI辅助审核</h3>
                            <p class="text-white/70 text-sm mt-1">智能识别违规内容，大幅提升审核效率</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3">
                        <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-check text-sm"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">多维度审核标准</h3>
                            <p class="text-white/70 text-sm mt-1">覆盖各类违规内容类型，精准识别</p>
                        </div>
                    </div>
                    
                    <div class="flex items-start space-x-3">
                        <div class="mt-1 w-6 h-6 rounded-full bg-white/20 flex items-center justify-center flex-shrink-0">
                            <i class="fa fa-check text-sm"></i>
                        </div>
                        <div>
                            <h3 class="font-medium">完善的审核流程</h3>
                            <p class="text-white/70 text-sm mt-1">标准化流程管理，确保审核质量与一致性</p>
                        </div>
                    </div>
                </div>
            </div>
            
            <div class="mt-12">
                <p class="text-white/60 text-sm">&copy; 2023 棱镜风控平台 版权所有</p>
            </div>
        </div>
        
        <!-- 右侧登录表单区域 -->
        <div class="flex-1 p-8 md:p-12 flex flex-col">
            <div class="text-center mb-10">
                <h2 class="text-2xl font-bold text-dark mb-2">欢迎登录</h2>
                <p class="text-neutral-500">请使用账号登录系统</p>
            </div>
            
            <div class="flex-1">
                <!-- 登录表单 -->
                <form id="loginForm" class="space-y-5">
                    <!-- 手机号输入 -->
                    <div>
                        <label for="phone" class="block text-sm font-medium text-neutral-500 mb-1">手机号</label>
                        <div class="relative">
                            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                                <i class="fa fa-phone"></i>
                            </div>
                            <input type="tel" id="phone" name="phone" placeholder="请输入手机号" 
                                class="w-full pl-10 pr-3 py-3 border border-neutral-200 rounded-lg input-focus"
                                maxlength="11" pattern="1[3-9]\d{9}" required>
                        </div>
                        <p class="text-danger text-xs mt-1 hidden" id="phoneError">请输入正确的手机号</p>
                    </div>
                    
                    <!-- 图片验证码 -->
                    <div class="grid grid-cols-2 gap-4">
                        <div>
                            <label for="imgCaptcha" class="block text-sm font-medium text-neutral-500 mb-1">图片验证码</label>
                            <div class="relative">
                                <div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                                    <i class="fa fa-shield"></i>
                                </div>
                                <input type="text" id="imgCaptcha" name="imgCaptcha" placeholder="请输入验证码" 
                                    class="w-full pl-10 pr-3 py-3 border border-neutral-200 rounded-lg input-focus"
                                    required>
                            </div>
                            <p class="text-danger text-xs mt-1 hidden" id="imgCaptchaError">请输入图片验证码</p>
                        </div>
                        
                        <div>
                            <label class="block text-sm font-medium text-neutral-500 mb-1">验证码图片</label>
                            <div class="relative h-12 rounded-lg overflow-hidden border border-neutral-200 bg-neutral-50">
                                <img src="https://picsum.photos/200/48?random=1" alt="图片验证码" class="w-full h-full object-cover" id="captchaImage">
                                <div type="button" class="absolute inset-0 bg-black/20 hover:bg-black/30 flex items-center justify-center text-white transition-colors" id="refreshCaptcha">
                                    <i class="fa fa-refresh"></i>
                                </div>
                            </div>
                        </div>
                    </div>
                    
                    <!-- 短信验证码 -->
                    <div>
                        <label for="smsCaptcha" class="block text-sm font-medium text-neutral-500 mb-1">短信验证码</label>
                        <div class="relative">
                            <div class="absolute left-3 top-1/2 -translate-y-1/2 text-neutral-400">
                                <i class="fa fa-comment"></i>
                            </div>
                            <input type="text" id="smsCaptcha" name="smsCaptcha" placeholder="请输入短信验证码" 
                                class="w-full pl-10 pr-32 py-3 border border-neutral-200 rounded-lg input-focus"
                                required>
                            <div type="button" id="getSmsCaptcha" 
                                class="absolute right-1 top-1/2 -translate-y-1/2 px-3 py-1.5 bg-primary text-white text-sm rounded-md hover:bg-primary/90 transition-colors disabled:bg-neutral-300 disabled:cursor-not-allowed">
                                获取验证码
                            </div>
                        </div>
                        <p class="text-danger text-xs mt-1 hidden" id="smsCaptchaError">请输入短信验证码</p>
                    </div>
                    
                    <!-- 登录按钮 -->
                    <button type="submit" 
                        class="w-full bg-primary hover:bg-primary/90 text-white font-medium py-3 rounded-lg transition-colors flex items-center justify-center">
                        <i class="fa fa-sign-in mr-2"></i> 登录系统
                    </button>
                    
                    <!-- 其他登录方式 -->
                    <div class="relative my-6">
                        <div class="absolute inset-0 flex items-center">
                            <div class="w-full border-t border-neutral-200"></div>
                        </div>
                        <div class="relative flex justify-center text-sm">
                            <span class="px-2 bg-white text-neutral-500">其他登录方式</span>
                        </div>
                    </div>
                    
                    <!-- 鲲鹏应用中心登录 -->
                    <button type="button" id="kunpengLogin"
                        class="w-full border border-neutral-200 hover:bg-neutral-50 text-dark font-medium py-3 rounded-lg transition-colors flex items-center justify-center">
                        <i class="fa fa-building mr-2"></i> 鲲鹏应用中心登录
                    </button>
                </form>
            </div>
            
            <div class="mt-8 text-center text-sm text-neutral-500">
                <p>登录即表示您同意我们的 <a href="#" class="text-primary hover:underline">服务条款</a> 和 <a href="#" class="text-primary hover:underline">隐私政策</a></p>
            </div>
        </div>
    </div>
    
    <!-- 登录成功提示 -->
    <div class="fixed inset-0 bg-black/50 z-50 hidden items-center justify-center" id="successModal">
        <div class="bg-white rounded-xl w-full max-w-md p-6 text-center">
            <div class="w-16 h-16 bg-success/10 rounded-full flex items-center justify-center mx-auto mb-4">
                <i class="fa fa-check text-2xl text-success"></i>
            </div>
            <h3 class="text-xl font-bold mb-2">登录成功</h3>
            <p class="text-neutral-500 mb-6">正在为您跳转至系统首页...</p>
            <div class="w-full bg-neutral-100 rounded-full h-2 mb-2">
                <div class="bg-primary h-2 rounded-full" id="progressBar" style="width: 0%"></div>
            </div>
            <p class="text-xs text-neutral-400">3秒后自动跳转</p>
        </div>
    </div>

    <script>
        // 等待DOM加载完成
        $(document).ready(function() {
            // 根据类型获取对应的图标
            function getToastIcon(type) {
                switch(type) {
                    case 'success': return 'fa-check-circle';
                    case 'error': return 'fa-times-circle';
                    case 'warning': return 'fa-exclamation-triangle';
                    case 'info': return 'fa-info-circle';
                    default: return 'fa-info-circle';
                }
            }
            // Toast提示函数
            function showToast(message, type = 'info', duration = 3000) {
                // 移除已存在的toast
                $('.toast').remove();
                
                // 创建toast元素
                const toast = $(`
                    <div class="toast toast-top-center toast-hidden toast-${type}">
                        <i class="fa toast-icon ${getToastIcon(type)}"></i>
                        <span>${message}</span>
                    </div>
                `);
                
                // 添加到页面
                $('body').append(toast);
                
                // 显示toast
                setTimeout(() => {
                    toast.removeClass('toast-hidden');
                }, 10);
                
                // 自动隐藏
                setTimeout(() => {
                    toast.addClass('toast-hidden');
                    setTimeout(() => {
                        toast.remove();
                    }, 300);
                }, duration);
            }
            
            $('#phone').on('blur', function() {
                const phone = $(this).val().trim();
                const phoneError = $('#phoneError');
                
                if (phone === '') {
                    phoneError.text('请输入手机号').removeClass('hidden');
                    return false;
                }
                
                const phoneReg = /^1[3-9]\d{9}$/;
                if (!phoneReg.test(phone)) {
                    phoneError.text('请输入正确的手机号').removeClass('hidden');
                    return false;
                }
                
                phoneError.addClass('hidden');
                
                // 只有手机号验证通过时才刷新图形验证码
                const timestamp = new Date().getTime();
                $('#captchaImage').attr('src', `/login/authcode?u=${phone}&t=${timestamp}`);
                return true;
            });
            
            // 刷新图片验证码
            $('#refreshCaptcha').click(function() {
                // 随机数防止缓存
                var mobile = $('#phone').val();
                const timestamp = new Date().getTime();
                if(mobile == undefined || mobile == ""){
                    showToast('请输入手机号', 'error');
                    return;                    
                }
                $('#captchaImage').attr('src', `/login/authcode?u=`+mobile+`&t=${timestamp}`);
                $('#imgCaptcha').val('');
            });
            
            // 图片验证码验证
            $('#imgCaptcha').on('blur', function() {
                const imgCaptcha = $(this).val().trim();
                const imgCaptchaError = $('#imgCaptchaError');
                
                if (imgCaptcha === '') {
                    imgCaptchaError.text('请输入图片验证码').removeClass('hidden');
                    return false;
                }
                
                imgCaptchaError.addClass('hidden');
                return true;
            });
            
            // 获取短信验证码
            let countdown = 0;
            $('#getSmsCaptcha').click(function() {
                const $this = $(this);
                // 如果正在倒计时，直接返回
                if (countdown > 0) return;
                
                // 验证手机号和图片验证码
                const phone = $('#phone').val().trim();
                const imgCaptcha = $('#imgCaptcha').val().trim();
                
                if (!phone) {
                    showToast('请输入手机号', 'error');
                    return;
                }
                
                if (!/^1[3-9]\d{9}$/.test(phone)) {
                    showToast('请输入有效的手机号', 'error');
                    return;
                }
                
                if (!imgCaptcha) {
                    showToast('请输入图形验证码', 'error');
                    return;
                }
                
                // 开始倒计时
                countdown = 60;
                $this.text(`重新获取(${countdown}s)`).prop('disabled', true);
                
                const timer = setInterval(function() {
                    countdown--;
                    $this.text(`重新获取(${countdown}s)`);
                    
                    if (countdown <= 0) {
                        clearInterval(timer);
                        $this.text('获取验证码').prop('disabled', false);
                        countdown = 0;
                    }
                }, 1000);
                
                // 发送请求获取手机验证码
                $.ajax({
                    url: '/login/getMobileCode',
                    type: 'GET',
                    data: {
                        phone: phone,
                        imgCaptcha: imgCaptcha
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.status/1 == 0) {
                            showToast('短信验证码已发送，请注意查收');
                        } else {
                            // 获取失败，刷新图形验证码
                            refreshImgCaptcha();
                            showToast(response.message || '获取验证码失败，请重试', 'error');
                            
                            // 重置倒计时
                            clearInterval(timer);
                            $this.text('获取验证码').prop('disabled', false);
                            countdown = 0;
                        }
                    },
                    error: function() {
                        // 网络错误，刷新图形验证码
                        refreshImgCaptcha();
                        showToast('网络异常，请重试', 'error');
                        
                        // 重置倒计时
                        clearInterval(timer);
                        $this.text('获取验证码').prop('disabled', false);
                        countdown = 0;
                    }
                });
            });
            
            // 刷新图形验证码的函数
            function refreshImgCaptcha() {
                // 假设图形验证码的img元素id为imgCaptchaImg
                // 添加随机参数防止缓存
                const timestamp = new Date().getTime();
                $('#imgCaptchaImg').attr('src', `/login/getImgCaptcha?t=${timestamp}`);
            }
            
            // 短信验证码验证
            $('#smsCaptcha').on('blur', function() {
                const smsCaptcha = $(this).val().trim();
                const smsCaptchaError = $('#smsCaptchaError');
                
                if (smsCaptcha === '') {
                    smsCaptchaError.text('请输入短信验证码').removeClass('hidden');
                    return false;
                }
                
                if (smsCaptcha.length !== 4) {
                    smsCaptchaError.text('短信验证码为4位数字').removeClass('hidden');
                    return false;
                }
                
                smsCaptchaError.addClass('hidden');
                return true;
            });
            
            // 表单提交处理
            $('#loginForm').submit(function(e) {
                e.preventDefault();
                
                // 验证所有字段
                const phone = $('#phone').val().trim();
                const imgCaptcha = $('#imgCaptcha').val().trim();
                const smsCaptcha = $('#smsCaptcha').val().trim();
                
                if (!phone || !/^1[3-9]\d{9}$/.test(phone)) {
                    alert('请输入有效的手机号');
                    return;
                }
                
                if (!imgCaptcha) {
                    alert('请输入图形验证码');
                    return;
                }
                
                if (!smsCaptcha) {
                    alert('请输入短信验证码');
                    return;
                }
                
                // 显示加载状态
                $('#loginBtn').text('登录中...').prop('disabled', true);
                
                // 发送登录请求
                $.ajax({
                    url: '/login/login',
                    type: 'GET',
                    data: {
                        phone: phone,
                        imgCaptcha: imgCaptcha,
                        smsCaptcha: smsCaptcha
                    },
                    dataType: 'json',
                    success: function(response) {
                        if (response.status/1==0) {
                            // 登录成功，显示成功模态框
                            $('#successModal').removeClass('hidden').addClass('flex');
                            // 返回的token存储到localStorage
                            localStorage.setItem('token', response.data.token);
                            // 进度条动画
                            let progress = 0;
                            const progressInterval = setInterval(function() {
                                progress += 1;
                                $('#progressBar').css('width', `${progress}%`);
                                
                                if (progress >= 100) {
                                    clearInterval(progressInterval);
                                    // 3秒后跳转到系统首页
                                    setTimeout(function() {
                                        window.location.href = '/main/index';
                                    }, 3000);
                                }
                            }, 30);
                        } else {
                            // 登录失败
                            showToast(response.message || '登录失败，请重试', 'error');
                            
                            // 刷新图形验证码
                            refreshImgCaptcha();
                            
                            // 重置登录按钮
                            $('#loginBtn').text('登录').prop('disabled', false);
                        }
                    },
                    error: function() {
                        // 网络错误
                        showToast('网络异常，请重试', 'error');
                        
                        // 重置登录按钮
                        $('#loginBtn').text('登录').prop('disabled', false);
                    }
                });
            });
            
            // 鲲鹏应用中心登录
            $('#kunpengLogin').click(function() {
                // 模拟跳转
                console.log('跳转到鲲鹏应用中心登录页面');
                if (confirm('确定要跳转到鲲鹏应用中心登录吗？')) {
                    window.location.href = 'https://www.kunpeng-app-center.com'; // 鲲鹏应用中心首页
                }
            });
        });
    </script>
</body>
</html>
